<template>
	<div>
		<div class="Male">
			<div v-show="showbooks">
				<div class="input" @click="GetSearch">
					<input type="text" placeholder="搜索" />
				</div>
				<div class="nav">
					<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
						<van-swipe-item>
							<img
								src="
						https://plf-new.zhuishushenqi.com/management/images/20201218/12ddcc817cdf49f787959bb53e21b584.png"
								alt=""
								srcset=""
							/>
						</van-swipe-item>
						<van-swipe-item>
							<img
								src="https://plf-new.zhuishushenqi.com/management/images/20210209/d55ce1e6f7584005820dff309b388917.png"
								alt=""
								srcset=""
							/>
						</van-swipe-item>
						<van-swipe-item>
							<img
								src="https://plf-new.zhuishushenqi.com/management/images/20210209/d57b17f1f3f7478ba1879fb631005e1a.jpg"
								alt=""
								srcset=""
							/>
						</van-swipe-item>
					</van-swipe>
				</div>
				<div class="nav_hot" v-show="this.lists.length !== 0">
					<h3>男生热门</h3>
					<div class="ul">
						<ul>
							<li v-for="(item, index) in lists.slice(0, 4)" :key="index" @click="getbookinfo(item._id)">
								<div class="left">
									<img
										:src="
											'http://statics.zhuishushenqi.com' +
												item.cover +
												'?imageMogr2/thumbnail/125x160'
										"
										alt=""
										srcset=""
									/>
								</div>
								<div class="rigth">
									<p>
										{{ item.author }} <span class="p_left" v-if="!item.allowMonthly">连载</span
										><span class="p_rigth" v-else>完结</span>
									</p>
									<p class="con">
										{{ item.shortIntro }}
									</p>
									<div>
										<div class="div_left">
											{{ item.minorCate }}<span class="div_con">|</span
											><span class="div_span">{{ item.latelyFollower }}</span
											>人气
										</div>
										<div class="div_rigth">{{ item.majorCate }}</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="nav_hot" v-show="this.maleGhost.length !== 0">
					<h3>男生完本</h3>
					<div class="ul">
						<ul>
							<li
								v-for="(item, index) in maleGhost.slice(0, 4)"
								:key="index"
								@click="getbookinfo(item._id)"
							>
								<div class="left">
									<img
										:src="
											'http://statics.zhuishushenqi.com' +
												item.cover +
												'?imageMogr2/thumbnail/125x160'
										"
										alt=""
										srcset=""
									/>
								</div>
								<div class="rigth">
									<p>
										{{ item.author }} <span class="p_left" v-if="!item.allowMonthly">连载</span
										><span class="p_rigth" v-else>完结</span>
									</p>
									<p class="con">
										{{ item.shortIntro }}
									</p>
									<div>
										<div class="div_left">
											{{ item.minorCate }}<span class="div_con">|</span
											><span class="div_span">{{ item.latelyFollower }}</span
											>人气
										</div>
										<div class="div_rigth">{{ item.majorCate }}</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="nav_hot" v-show="this.maleFinish.length !== 0">
					<h3>男生大神区</h3>
					<div class="ul">
						<ul>
							<li
								v-for="(item, index) in maleFinish.slice(0, 4)"
								:key="index"
								@click="getbookinfo(item._id)"
							>
								<div class="left">
									<img
										:src="
											'http://statics.zhuishushenqi.com' +
												item.cover +
												'?imageMogr2/thumbnail/125x160'
										"
										alt=""
										srcset=""
									/>
								</div>
								<div class="rigth">
									<p>
										{{ item.author }} <span class="p_left" v-if="!item.allowMonthly">连载</span
										><span class="p_rigth" v-else>完结</span>
									</p>
									<p class="con">
										{{ item.shortIntro }}
									</p>
									<div>
										<div class="div_left">
											{{ item.minorCate }}<span class="div_con">|</span
											><span class="div_span">{{ item.latelyFollower }}</span
											>人气
										</div>
										<div class="div_rigth">{{ item.majorCate }}</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { gethot, getrepulation, getBixo } from '../../api/base';
export default {
	data() {
		return {
			lists: [],
			showlists: '',
			maleGhost: '',
			maleFinish: '',
			male: 'male',
			showbooks:false,
		};
	},
	methods: {
		GetSearch() {
			this.$router.push({
				path: '/Search',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
		},
		getbookinfo(id) {
			// this.$store.commit("getid",id);
			localStorage.setItem('boosk_id', id);
			this.$store.commit('showlists', (this.showlists = true));
			// this.$router.replace('/Bookdetails')
			this.$router.push({
				path: '/Bookdetails',
				// name: 'mallList',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
		},
	},
	created() {
		this.$toast.loading({
			duration: 0,
			forbidClick: true,
			mask: true,
			message: '加载中...',
		});
		gethot().then((data) => {
			this.lists = data.ranking.books;
			getrepulation().then((data) => {
				this.maleGhost = data.ranking.books;
				// console.log(data)
				getBixo().then((data) => {
					this.maleFinish = data.ranking.books;
					// console.log(data)
					this.$toast.clear();
					this.showbooks = true;
				});
			});
		});
	},
};
</script>

<style lang="less" scoped>
.Male {
	width: 640px;
	.input {
		width: 100%;
		margin: 10px 0;
		input {
			width: 95%;
			display: block;
			margin: 0 auto;
			height: 50px;
			border-radius: 5px;
			outline: none;
			border: none;
			background-color: #e9e9e9;
			text-indent: 20px;
		}
	}
	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
		// background-color: #39a9ed;
		img {
			width: 640px;
		}
	}
	.nav_hot {
		border-top: 18px solid #ccc;
		h3 {
			padding: 0 10px;
			margin-top: 20px;

			border-left: 5px solid #b83320;
		}
		.ul {
			width: 95%;
			margin: 20px auto;
			ul {
				width: 100%;
				li {
					margin: 20px 0;
					display: flex;
					.left {
						flex: 0 0 90px;
						img {
							width: 90px;
						}
					}
					.rigth {
						flex: 1;
						padding: 0 20px 20px;
						border-bottom: 1px solid #ccc;
						.p_left {
							background-color: #b83320;
							color: #fff;
							padding: 1px;
						}
						.p_rigth {
							padding: 1px;
							color: #fff;
							background-color: #008000;
						}
						.con {
							color: #666;
							margin: 15px 0;
						}
						div {
							display: flex;
							justify-content: space-between;
							.div_left {
								line-height: 28px;
								.div_con {
									margin: 0 10px;
								}
								.div_span {
									color: #b83320;
								}
							}
							.div_rigth {
								padding: 2px 5px;
								border: 1px solid #b83320;
							}
						}
					}
				}
			}
		}
	}
}
</style>
